<template>
    <MessageBox>
        <div class="messageModel">
            <div class="text">
                <div class="title">{{ props.info.name }}</div>
                <div class="content">{{ props.info.content }}</div>
            </div>
            <div class="icon">
                <el-image :src="formatUrl(props.info)" alt="" fit="cover">
                    <template #error>
                        <el-image :src="getDefaultUrl(props.info)" alt=""></el-image>
                    </template>
                </el-image>
            </div>
        </div>
    </MessageBox>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import MessageBox from './MessageBox.vue';
import { getHashTabs } from '@/utils/utils';

const props = defineProps(['info']);

const formatUrl = (info: any) => {
    switch (info.type) {
        case '3':
            return info.linkUrl || info.icon;
        default:
            return info.icon;
    }
};

const getDefaultUrl = (info: any) => {
    const maps = getHashTabs();
    return maps[info.type].icon;
};
</script>

<style lang="scss" scoped>
.messageModel {
    display: flex;

    .text {
        flex: 1;
        font-size: 13px;
        color: #666;
        line-height: 18px;
        margin-right: 6px;
        font-weight: 400;

        .title {
            font-size: 15px;
            color: #000;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }

        .content {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            margin-top: 5px;
        }
    }

    .icon {
        width: 48px;
        height: 48px;
        position: relative;
        margin-top: 25px;

        .el-image {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
    }
}
</style>
